*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
/* 大背景 */
/* 默认状态HTML和body的高度是0，所以导致cover缩放背景图不成功 */
/* html{

} */
html{
    height: 100%;

}
body{
    height: 100%;
    background: url(./images/f1_1.jpg) no-repeat center 0 / cover;
}
.cloud img{
    position: absolute;
    left: 50%;
}
.cloud img:nth-child(1){
    margin-left: -250px;
    margin-top: 20px;
    animation: cloud 1s infinite alternate linear;
}
.cloud img:nth-child(2){
    margin-left: 500px;
    margin-top: 100px;
    animation: cloud 1s infinite alternate linear 0.2s;

}
.cloud img:nth-child(3){
    margin-left: -500px;
    margin-top: 200px;
    animation: cloud 1s infinite alternate linear 0.6s;

}

@keyframes cloud {
    to{
        transform: translate(20px);
    }
}

.txt img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    animation: txt 1s;
}
/* 默认，缩小，放大，缩小，默认 */
@keyframes txt {
    0%{
        transform:translate(-50%,-50%) scale(1);
    }
    20%{
        transform:translate(-50%,-50%) scale(0.1);
    }
    40%{
        transform:translate(-50%,-50%) scale(2);
    }
    70%{
        transform:translate(-50%,-50%) scale(0.7);
    }
    100%{
        transform:translate(-50%,-50%) scale(1);
    }
}
.ball img{
    position: absolute;
    left: 350px;
    top: 180px;
    animation: ball 1s infinite alternate linear;
}
@keyframes ball {
    to{
        transform: translateY(-20px);
    }
}
.hot ul{
    position: absolute;
    left: 350px;
    top: 580px;
    display: flex;
}
.hot li{
    margin-right: 80px;
}
@keyframes hot {
    to{
        transform: translateY(30px);
    }
}
.hot li:nth-child(1){
    animation: hot 1s infinite alternate ;
}
.hot li:nth-child(2){
    animation: hot 1s infinite alternate  0.2s;
}
.hot li:nth-child(3){
    animation: hot 1s infinite alternate  0.4s;
}
.hot li:nth-child(4){
    animation: hot 1s infinite alternate  0.6s;
}
